<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>咨客_手牌管理</title>
		<link href="<c:url value="/resources/css/style.css" />" rel="stylesheet" type="text/css">
		<link href="<c:url value="/resources/css/default/easyui.css" />" rel="stylesheet" type="text/css">
		<link href="<c:url value="/resources/css/icon.css" />" rel="stylesheet" type="text/css">
		<script type="text/javascript">
			function onQuery(){
				$.ajax({
					url:'queryTokenList',
					data:{'tokenType':$("#tokenType").combobox('getValue'), 
						  'tokenStatus':$("#tokenStatus").combobox('getValue')},
					type:'post',
					dataType:'json',
					async:false,
					cache:false,
					success:function(data){
						if(data.length > 0)
							$("#tokenTable").html('');
						
						var count = 0;						
						var row = '<tr>';
					
						$(data).each(function(){
							if(count != 0 && count % 6 == 0){
								row += "</tr>";
								row += "<tr>";
							}
							row += "<td width='150px' height='100px' style='cursor:pointer;border: 1px solid #000;text-align: center;";
							if(this['status'] == 'used')
								row += "background-color:#CCFFCC;";
							row += "' onclick='onDetail(\"" + this['token_no'] + "\", \"" + this['status'] + "\")'";
							row += ">";
							row += '手牌：' + this['token_no'] + '<br/>';
							row += '房间：' + this['tokenTypeName'] + '<br/>';
							row += '状态：' + this['statusName'] + "<br/></td>";
							
							count ++ ;
						});
							
						row += "</tr>";
						$("#tokenTable").html(row);
					}
				});
			}
		
			function onRoomList(){
				location.href = "${pageContext.request.contextPath}/consultRoom/roomList";
			}
			
			function onDetail(tokenNo, status){
				$("#tokenNo").val(tokenNo);
				$("#status").val(status);
				
				$("#tokenForm").submit();
			}
		</script>
	</head>
	<body alink=" ">
		<c:import url="/WEB-INF/resources/common/consult_header.jsp" />
		<div>
			手牌类型：
			<select id="tokenType" name="tokenType" class="easyui-combobox" data-options="panelHeight:'auto'">
				<option value="-1" selected="selected">所有</option>
				<c:forEach var="code" items="${tokenTypeList}">
					<option value="${code.id}">${code.token_type_name}</option>	
				</c:forEach>
			</select>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			状态：
			<select id="tokenStatus" name="tokenStatus" class="easyui-combobox" data-options="panelHeight:'auto'">
				<option value=" " selected="selected">所有</option>
				<c:forEach var="code" items="${tokenStatusList}">
					<option value="${code.code}">${code.name}</option>	
				</c:forEach>
			</select>
			
			<span style="margin-left: 200px;">
				<input type="button" name="queryBtn" value="查询" onclick="onQuery()">
				<input type="button" name="roomListBtn" value="房间列表" onclick="onRoomList()">
			</span>
		</div>		
		
		<div style="margin-top: 10px;">
			<div style="float: left;margin-right: 80px;width:750px;" id="tokenListDiv">
				<table style="border-collapse: collapse;" id="tokenTable">
					<tr>
					<c:forEach var="token" items="${tokenList}" varStatus="status">						
						<c:if test="${status.index != 0 && status.index%6==0}">
							</tr>
							<tr>
						</c:if>
						
						<td width="150px" height="100px" style="cursor:pointer;border: 1px solid #000; <c:if test="${token.status == 'used'}">background-color:#CCFFCC;</c:if>text-align: center;"
							onclick="onDetail('${token.token_no}', '${token.status}')" >
							手牌：${token.token_no}<br/>
							类型：${token.tokenTypeName}<br/>
							状态：${token.statusName}
						</td>
					</c:forEach>
					</tr>
				</table>
			</div>
			<div id="tokenStatusDiv">
				<table style="border-collapse: collapse;" width="300px;" >
					<c:forEach var="dto" items="${tokenStatList}">
						<tr>
							<td style="background-color:#F0ECE0;height:25px;vertical-align:middle; text-align:center; border: 1px solid #000;">${dto.name}</td>
							<td style="background-color:#F0ECE0;height:25px;vertical-align:middle; text-align:center; border: 1px solid #000;">&nbsp;</td>
							<td style="background-color:#F0ECE0;height:25px;vertical-align:middle; text-align:center; border: 1px solid #000;">共${dto.total}个</td>
						</tr>
						<c:forEach var="stat" items="${dto.list}">
							<tr>
								<td style="height:25px;vertical-align:middle; text-align:center; border: 1px solid #000;">&nbsp;</td>
								<td style="height:25px;vertical-align:middle; text-align:center; border: 1px solid #000;">${stat.statusName}</td>
								<td style="height:25px;vertical-align:middle; text-align:center; border: 1px solid #000;">${stat.amount}</td>
							</tr>
						</c:forEach>
					</c:forEach>
				</table>
			</div>
		</div>
				
		<form name="tokenForm" id="tokenForm" action="tokenDetail" method="post">
			<input type="hidden" name="status" id="status" />
			<input type="hidden" name="tokenNo" id="tokenNo" />
		</form>
	</body>
</html>